import { Divider, Space, Typography } from 'antd';
import { Children, Fragment, ReactNode } from 'react';

const { Text } = Typography;

export function InlineInfoItems({
  items,
  colon,
}: {
  items: { key?: ReactNode; value: ReactNode }[];
  colon?: boolean;
}) {
  const lastIndex = items.length - 1;
  return items.map(({ key, value }, i) => {
    return (
      <Fragment key={i}>
        <Space size={4}>
          {key && (
            <Text type="secondary">
              {key}
              {colon ? ':' : ''}
            </Text>
          )}
          <Text strong>{value}</Text>
        </Space>
        {i !== lastIndex ? <Divider type="vertical" /> : null}
      </Fragment>
    );
  });
}
